<template>
    <div id="get">
      <li v-for="item in obj">{{ item | json }}</li>
      <br/>
      <br/>
      <button @click="getdata">get提交数据</button>
      <button @click="postdata">post提交数据</button>
      <button @click="getjsonp">json请求</button>
      <br/>
      <br/>
      <h2>recommend</h2>
    </div>
</template>

<script>
  import {getRecommend} from '../api/recommend'
  import {ERR_OK} from '../api/config'

  const jsonp = require('jsonp')
    export default {
        name: "get",
      data(){
          return{
            obj:null,
            recommends: []
          }
      },
      filters:{
        //转换成json对象
        json:function (value) {
          var res = JSON.stringify(value);
          return res;
        }
      },
      created(){
          this._getRecommend();
      },
      // Vue对象实例创建成功以后就会自动调用这个方法
      created(){
        // this.getdata();
      },
      mounted(){

      },
      methods:{
          getdata:function () {
            var url = 'api/message';
            this.axios.get(url)
              .then((response) =>{
                console.log(response.data);// response.data为后端返回的具体数据
                alert("get请求成功");
                this.obj = response.data;
                console.log(this.obj);
                console.log(response.data);
                console.log(response.status);
                console.log(response.statusText);
                console.log(response.headers);
                console.log(response.config);
              }).catch(function (error) {
                console.log(error);
                alert("get请求失败");
            })
          },
          postdata:function () {
            var url = 'api/message';
            this.axios.post(url,{
              name:'奔驰',
              ctime:new Date()
            }).then((response) =>{
                alert(response);
                alert("post请求成功");
                //将列表的数据重新加载一次
                this.getdata();
              }).catch(function (error) {
                console.log(error);
                alert("post请求失败");
            })
          },
        getjsonp:function () {
            var url = 'api/message';
            jsonp(url,null,(err,data) =>{
              if(err){
                console.log(err);
                alert("json请求失败");
              }else{
                console.log(data);
                alert("json请求成功");
              }
            })
        },
        _getRecommend:function() {
          getRecommend().then((res) => {
            if (res.code === ERR_OK) {
              console.log(res.data.slider)
            }
          })
        },
        _getDiscList() {
          getDiscList().then((res) => {
            if (res.code === ERR_OK) {
            }
            console.log(res.data.list)
          })
        }
      }
    }
</script>

<style scoped>

</style>
